$(() => {
  let $submitBtn = $("#submit");
  let $searchBtn = $("#search");
  let $searchByIdBtn = $("#searchById");
  let $clearAllBtn = $("#clearAll");
  let $form = $("#form");

  // 点击录入按钮
  $submitBtn.on("click", function (e) {
    e.preventDefault();
    let params = getFormParams("#form");
    window.$dbActions.person
      .add(params)
      .then((res) => {
        alert("新增成功!");
        searchList();
      })
      .catch(() => {
        alert("新增数据失败!");
      });
  });

  // 点击查询全部按钮
  $searchBtn.on("click", function (e) {
    e.preventDefault();
    searchList();
  });

  // 清空全部数据
  $clearAllBtn.on("click", function (e) {
    e.preventDefault();
    if (window.confirm("确认清空全部数据吗?")) {
      window.$dbActions.person
        .clearAll()
        .then((res) => {
          alert("新清空成功!");
          searchList();
        })
        .catch(() => {
          alert("清空失败!");
        });
    }
  });

  // 点击通过id查询按钮
  $searchByIdBtn.on("click", function (e) {
    e.preventDefault();
    let id = $("#searchByIdIpt").val();
    if (!id) {
      alert("请输入id!");
      return;
    }
    window.$dbActions.person
      .getOneById(Number(id))
      .then((res) => {
        if (res) {
          renderTable([res]);
        } else {
          alert("未查询到数据!");
        }
      })
      .catch(() => {
        alert("查询数据失败!");
      });
  });

  $("#my-table").on("click", ".del", function () {
    let id = $(this).parent().parent().data("id");
    window.$dbActions.person
      .delete({ id })
      .then((res) => {
        alert("删除数据成功!");
        searchList();
      })
      .catch(() => {
        alert("删除数据失败!");
      });
  });
  $("#my-table").on("click", ".update", function () {
    console.log("修改");
    let id = $(this).parent().parent().data("id");
    let obj = {
      id,
      name: "",
      age: "",
    };
    obj.name = $(this).parent().parent().find('input[name="name"]').val();
    obj.age = $(this).parent().parent().find('input[name="age"]').val();
    window.$dbActions.person
      .update(obj)
      .then((res) => {
        alert("更新成功!");
        searchList();
      })
      .catch((err) => {
        alert("更新失败!");
      });
  });

  /**
   * 查询table数据
   * @return {void}
   * */
  function searchList() {
    window.$dbActions.person
      .selectAll()
      .then((res) => {
        renderTable(res);
      })
      .catch((err) => {
        console.log(err);
        alert("查询据失败!");
      });
  }

  /**
   * 渲染table
   * @param {array} arr  table数据
   * @return {void}
   * */
  function renderTable(arr) {
    let str = "";
    arr.map((i) => {
      str += `<tr data-id="${i.id}" >
                <td>${i.id}</td>
                <td><input value="${i.name}" name="name" type="text"></td>
                <td><input value="${i.age}" name="age" type="text"></td>
                <td>${i.dept}</td>
                <td>${i.createTime}</td>
                <td>
                    <button class="del">删除</button>
                    <button class="update">修改</button>
                </td>
            </tr>`;
    });
    $("#my-table tbody").empty().append(str);
  }

  /**
   * 获取表单数据
   * @param {string} str  选择器
   * @return {object}  表单数据
   * */
  function getFormParams(str) {
    let dom = $(str);
    let obj = {};
    if (dom) {
      let arr = $form.serializeArray();
      arr.map((i) => {
        obj[i.name] = i.value;
      });
    }
    return obj;
  }
});
